import { ref } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'

export const useFullScreen = () => {
  const isFullScreen = ref(false)

  const watchFullScreenClose = () => {
    if (document.fullscreenElement === null) {
      isFullScreen.value = false
    }
  }

  const changeFullScreen = async () => {
    isFullScreen.value = !isFullScreen.value

    if (isFullScreen.value) {
      await document.documentElement.requestFullscreen()
      MessagePlugin.closeAll()
      await MessagePlugin.info('已进入全屏模式！')
      document.addEventListener('fullscreenchange', watchFullScreenClose)
    } else {
      document.body.style.overflow = 'hidden' // Hidden the scroll bar
      await document.exitFullscreen()
      MessagePlugin.closeAll()
      await MessagePlugin.info('已退出全屏模式！')
      document.removeEventListener('fullscreenchange', watchFullScreenClose)
    }
  }

  return {
    isFullScreen,
    changeFullScreen
  }
}
